<template>
  <div>
    <div class="influenceleft">
      <h1 style="float:left">查询不同年级的平均分</h1>
      <div style="height:50px"></div>
      <Select v-model="model1" style="width:200px">
        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <Select v-model="model1" style="width:200px">
        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <Button>查询</Button>
      <div style="height:10px"></div>
      <Table border :columns="columns1" :data="data1"></Table>
    </div>
    <div class="influenceright">
      <h2 style="float:left">影响因素分析</h2>
      <div style="height:50px"></div>
      <Card>
        <Collapse accordion>
          <Panel name="1" style="text-align:left">
            上课的积极性很低
            <p slot="content">学生上课积极性不高，是由多方面因素造成的。</p>
          </Panel>
          <Panel name="2" style="text-align:left">
            逃课，不上课
            <p
              slot="content"
            >1.对课程不感兴趣，受不了教学死板的老师  2.乐衷于寻找各种兼职增加自己的社会实践能力和赚取零花钱 3.不上课，期末照样考高分</p>
          </Panel>
          <Panel name="3" style="text-align:left">
            数学成绩很差
            <p
              slot="content"
            >基础不扎实的学生 基础不扎实导致概念不清楚,从而做题没思路,对于这种情况我们不能盲目的去做题,靠题海战术取胜。</p>
          </Panel>
        </Collapse>
      </Card>
    </div>
    <div class="botton">
      <!-- <h2 style="margin-top:20px">问卷调查</h2> -->
      <!-- <Select v-model="model1" style="width:200px">
        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <Button>查询</Button>-->
      <div class="background">
    <div class="size">
      <p style="font-size:20px">问卷调查结果</p>
      <Select v-model="model1" style="width:300px">
        <Option v-for="item in question" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <button class="btn" @click="sure">确定</button>
    </div>
    <div id="myChart" :style="{width: '90%', height: '300px'}"></div>
  </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import echarts from "echarts";
// import echarts from "echarts";
import { METHODS } from "http";
export default {
  data() {
     return {
      question: [], //问题题目
      questionA: [], //问题A选项
      questionB: [], //问题B选项
      questionC: [], //问题C选项
      questionD: [], //问题D选项
      AnswerA:[],//三类的学生  A类
      AnswerB:[],//B类
      AnswerC:[],//C类
      AnswerA1:["2","0","7"],//展示的结果 里面三天答案
      AnswerB1:["9","14","48"],
      AnswerC1:["97","136","152"],
      AnswerD1:["55","103","30"],//展示的结果
      echarts1: [],
      model1: "学生每天几点睡觉？", //选择的问题
      modelA: "10点前", //默认问题A答案
      modelB: "10点到11点间",
      modelC: "11点到12点间",
      modelD: "12点以后",
      cityList: [
        {
          value: "New York",
          label: "New York"
        },
        {
          value: "London",
          label: "London"
        },
        {
          value: "Sydney",
          label: "Sydney"
        },
        {
          value: "Ottawa",
          label: "Ottawa"
        },
        {
          value: "Paris",
          label: "Paris"
        },
        {
          value: "Canberra",
          label: "Canberra"
        }
      ],
      cityList: [
        {
          value: "180611",
          label: "180611"
        },
        {
          value: "180612",
          label: "180612"
        },
        {
          value: "180613",
          label: "180613"
        }
      ],
      model1: "", //选择年级双向绑定的数据
      columns1: [
        {
          title: "年级",
          key: "name"
        },
        {
          title: "班级",
          key: "age"
        },
        {
          title: "平均分",
          key: "address"
        }
      ],
      data1: [
        {
          name: "16级",
          age: 1650131,
          address: "76",
          date: "2016-10-03"
        },
       {
          name: "16级",
          age: 1650132,
          address: "77",
          date: "2016-10-03"
        },
        {
          name: "17级",
          age: 1650121,
          address: "80",
          date: "2016-10-03"
        },
        {
          name: "17级",
          age: 1650122,
          address: "74",
          date: "2016-10-03"
        },
      ]
    };
  },
  created() {
    this.req_Questionnaire();
    this.req_question();
  },
  // mounted() {
    
  // },
  mounted() {
    this.showecharts();
    this.displayMix();
  },
  methods: {

    sure() {
      for (let i = 0; i < this.question.length; i++) {
        if (this.model1 == this.question[i].value) {
          console.log(i);
          this.modelA = this.questionA[i];
          this.modelB = this.questionB[i];
          this.modelC = this.questionC[i];
          this.modelD = this.questionD[i];
          this.AnswerA1 = [this.AnswerA[i+1].A,this.AnswerB[i+1].A,this.AnswerC[i+1].A]
          this.AnswerB1 = [this.AnswerA[i+1].B,this.AnswerB[i+1].B,this.AnswerC[i+1].B]
          this.AnswerC1 = [this.AnswerA[i+1].C,this.AnswerB[i+1].C,this.AnswerC[i+1].C]
          this.AnswerD1 = [this.AnswerA[i+1].D,this.AnswerB[i+1].D,this.AnswerC[i+1].D]
        }
      }
      this.displayMix();
    },
    //请求的数据 没题目
    req_Questionnaire() {
      axios.post("/api/index/QuestionNaire/QuestionNaire").then(res => {
        let i =  0
        for(const key in res.data[0]) {
          this.AnswerA[i] = res.data[0][key]
          this.AnswerB[i] = res.data[1][key]
          this.AnswerC[i] = res.data[2][key]
          i = i + 1
        }
      });
    },
    //请求的题目 带问题
    req_question() {
      axios.post("/api/index/Question/Question").then(res => {
        let i = 0;
        for (const key in res.data) {
          this.question.push({
            value: res.data[key].Q,
            label: res.data[key].Q
          });
          
          this.questionA[i] = res.data[key].A;
          this.questionB[i] = res.data[key].B;
          this.questionC[i] = res.data[key].C;
          this.questionD[i] = res.data[key].D;
          i = i + 1;
        }
        console.log(this.question)
        console.log(this.questionA)
      });
    },
    //柱状图
    displayMix() {
      var myChart = echarts.init(document.getElementById("myChart"));
      //   app.title = "数据分析";

      var posList = [
        "left",
        "right",
        "top",
        "bottom",
        "inside",
        "insideTop",
        "insideLeft",
        "insideRight",
        "insideBottom",
        "insideTopLeft",
        "insideTopRight",
        "insideBottomLeft",
        "insideBottomRight"
      ];

      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: "left",
            center: "center",
            right: "right"
          }
        },
        verticalAlign: {
          options: {
            top: "top",
            middle: "middle",
            bottom: "bottom"
          }
        },
        position: {
          options: echarts.util.reduce(
            posList,
            function(map, pos) {
              map[pos] = pos;
              return map;
            },
            {}
          )
        },
        distance: {
          min: 0,
          max: 100
        }
      };

      app.config = {
        rotate: 90,
        align: "left",
        verticalAlign: "middle",
        position: "insideBottom",
        distance: 15,
        onChange: function() {
          var labelOption = {
            normal: {
              rotate: app.config.rotate,
              align: app.config.align,
              verticalAlign: app.config.verticalAlign,
              position: app.config.position,
              distance: app.config.distance
            }
          };
          myChart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          });
        }
      };

      var labelOption = {
        normal: {
          show: true,
          position: app.config.position,
          distance: app.config.distance,
          align: app.config.align,
          verticalAlign: app.config.verticalAlign,
          rotate: app.config.rotate,
          formatter: "{c}  {name|{a}}",
          fontSize: 16,
          rich: {
            name: {
              textBorderColor: "#fff"
            }
          }
        }
      };

      var option = {
        color: ["#003366", "#006699", "#4cabce", "#e5323e"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          data: [this.modelA, this.modelB, this.modelC, this.modelD,]
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar", "stack", "tiled"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: ["优秀", "中等", "未及格"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: this.modelA,
            type: "bar",
            barGap: 0,
            label: labelOption,
            data: this.AnswerA1
          },
          {
            name: this.modelB,
            type: "bar",
            label: labelOption,
            data: this.AnswerB1
          },
          {
            name: this.modelC,
            type: "bar",
            label: labelOption,
            data: this.AnswerC1
          },
          {
            name: this.modelD,
            type: "bar",
            label: labelOption,
            data: this.AnswerD
          }
        ]
      };
      myChart.setOption(option);
    },
    showecharts() {
      var myChart = echarts.init(document.getElementById("myChart"));
      var posList = [
        "left",
        "right",
        "top",
        "bottom",
        "inside",
        "insideTop",
        "insideLeft",
        "insideRight",
        "insideBottom",
        "insideTopLeft",
        "insideTopRight",
        "insideBottomLeft",
        "insideBottomRight"
      ];

      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: "left",
            center: "center",
            right: "right"
          }
        },
        verticalAlign: {
          options: {
            top: "top",
            middle: "middle",
            bottom: "bottom"
          }
        },
        position: {
          options: echarts.util.reduce(
            posList,
            function(map, pos) {
              map[pos] = pos;
              return map;
            },
            {}
          )
        },
        distance: {
          min: 0,
          max: 100
        }
      };

      app.config = {
        rotate: 90,
        align: "left",
        verticalAlign: "middle",
        position: "insideBottom",
        distance: 15,
        onChange: function() {
          var labelOption = {
            normal: {
              rotate: app.config.rotate,
              align: app.config.align,
              verticalAlign: app.config.verticalAlign,
              position: app.config.position,
              distance: app.config.distance
            }
          };
          myChart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          });
        }
      };

      var labelOption = {
        normal: {
          show: true,
          position: app.config.position,
          distance: app.config.distance,
          align: app.config.align,
          verticalAlign: app.config.verticalAlign,
          rotate: app.config.rotate,
          formatter: "{c}  {name|{a}}",
          fontSize: 16,
          rich: {
            name: {
              textBorderColor: "#fff"
            }
          }
        }
      };

      let option = {
        color: ["#003366", "#006699", "#4cabce", "#e5323e"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          data: ["Forest", "Steppe", "Desert", "Wetland"]
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar", "stack", "tiled"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: ["2014", "2015", "2016"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "Forest",
            type: "bar",
            barGap: 0,
            label: labelOption,
            data: [301, 334, 390]
          },
          {
            name: "Steppe",
            type: "bar",
            label: labelOption,
            data: [191, 234, 290]
          },
          {
            name: "Desert",
            type: "bar",
            label: labelOption,
            data: [201, 154, 190]
          },
          {
            name: "Wetland",
            type: "bar",
            label: labelOption,
            data: [101, 99, 40]
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>

<style>
.background {
  width: 87vw;
  background-color: #ffffff;
  margin-top: 20px;
}
.size {
  padding: 10px 5px;
  /* position: absolute; */
}
.btn {
  background-color: #ffffffff;
  padding: 6px 20px;
  font-size: 10px;
  border-radius: 4px;
  margin-left: 5px;
}
.influenceleft {
  width: 49%;
  height: 45vh;
  margin: 0.25%;
  border: 1px solid #dddddd;
  padding: 0.25%;
  /* background-color: #dddddd; */
  float: left;
}
.influenceright {
  float: right;
  width: 49%;
  height: 45vh;
  margin: 0.25%;
  border: 1px solid #dddddd;
  padding: 0.25%;
}
.botton {
  width: 100%;
  height: 30vh;
  position: absolute;
  margin-top: 50vh;
}
</style>